<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<a href="#a">#a</a>
<a href="#b">#b</a>
<body>
<script>
  console.log('history:',history);
  window.addEventListener('popstate',(event)=>{ /** 注意只能监听页面内跳转(即hash),如果是跳转到其它页面,相当于新开个页面,这里的js代码是没有用的*/
    alert('popstate'); // 如果是跳转到站外 这个alert也不会触发
    console.log('event:',event);
  })

/* 历史记录 就是当前tab页你加载的url的记录
右键运行本页面

打开控制台 你可以发现现在 history.length=1

在url栏中输入一个网站的地址 跳转到目标网站(比如百度)

再在控制台中输入history 你会发现 history.length=2

此时你在控制台中输入history.back()

你会发现回到了之前的那个页面

再输入history.forward()

你会发现又回到了百度网站
*/

/** 故你会发现history这个对象 并不会随着你跳转页面而销毁 除非你关闭了这个tab页*/



/* 除了跳转到新网址 会在历史栈中记录一个新的历史 还有什么情况会记录呢？

  hash变化也会被记录
  + <a href="#a">#a</a> 锚链接(点击锚点进行页面内跳转 也会记录历史)
  + 手动打开控制台 输入location='#abc'

  但需要注意的是如果你是通过调用 location.href 跳转页面
  + 跳转到其它页面 会记录历史
  + 手动打开控制台 输入location='#abc'也会记录
  + 但如果你是直接在脚本同步代码里写 location='#abc' 就像case1 一样 那么是不会添加历史记录的
  + 套在setTimeout这种,异步执行,是会往历史记录里添加的(但chrome80+至少要设置16ms延迟(且第一个hash仍然会被合并,但如果延迟很久比如1s就不会被合并);firefox无需,只要异步即可)
*/
  /*case 1*/
 /* location = '#a';
  console.log('history:',history); // 不会记录进历史
  location = '#b';
  console.log('history:',history); // 会记录历史 相当于和首次tab加载合并了 直接加载的就是这个url
  console.log(history.length); // 1
  //todo 会触发popState事件 且firefox会触发两次(但只添加一次历史记录) chrome只会触发一次
  // location.href = 'http://www.baidu.com'; //会记录历史*/


  /*case 2*/
  /*setTimeout(()=>{
    location = '#a';
    console.log('history:',history); // 会记录历史 但如果是chrome的话 这里 相当于和首次tab加载合并了 直接加载的就是这个url(firefox则是会单独记录)
    location = '#b';
    console.log('history:',history); // 会记录历史
    console.log(history.length); // 2

  },16)*/


  // setTimeout(()=>{
  //   location = '#a';
  //   console.log('history:',history); // 会记录历史 chrome也不会合并
  //   location = '#b';
  //   console.log('history:',history); // 会记录历史
  //   console.log(history.length); // 3
  //
  // },2000)


</script>
</body>
</html>
